/*
 *@description:订单评论
 *@Author:@reynold
 *@Date:2025-03-22 11:03:52
 *@Update:2025-03-22 11:03:52
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="order_box">
      <!-- 头部 -->
      <div class="header">
        <!-- 输入关键字 -->
        <div class="header_box">
          <el-input v-model="input" size="mini" placeholder="请输入关键字"></el-input>
        </div>
        <!-- 输入订单编号 -->
        <div class="header_box">
          <el-input v-model="orderInput" size="mini" placeholder="请输入订单编号"></el-input>
        </div>
        <!-- 选择状态 -->
        <div class="header_box">
           <el-select v-model="statusValue" clearable size="mini" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 查询按钮 -->
        <div class="header_box">
          <el-button size="mini" @click="search">查询</el-button>
        </div>
      </div>
      <!-- 内容 -->
      <div class="content">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="orderContent"
            label="评论内容"
            width="300">
          </el-table-column>
          <el-table-column
            prop="customId"
            label="顾客编号">
          </el-table-column>
          <el-table-column
            prop="orderId"
            label="订单编号">
          </el-table-column>
          <el-table-column
            prop="comTime"
            label="评论时间">
          </el-table-column>
          <el-table-column
            label="评论状态">
            <template slot-scope="scope">
              <!-- 通过的  不通过的 未审核的 -->
              <el-tag v-if="scope.row.status == '通过'" type="success" size="mini" effect="dark">{{scope.row.status}}</el-tag>
              <el-tag v-else-if="scope.row.status == '不通过'" type="danger" size="mini" effect="dark">{{scope.row.status}}</el-tag>
              <el-tag v-else type="info" size="mini" effect="dark">{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <!-- 通过 不通过 删除 -->
              <div v-if="scope.row.status == '未审核'">
                <el-button class="columnBtn1" type="text" size="small" @click="pass(scope.row)">通过</el-button>
                <el-button class="columnBtn1" type="text" size="small" @click="noPass(scope.row)">不通过</el-button>
                <el-button class="columnBtn1" type="text" size="small" @click="del(scope.row)">删除</el-button>
              </div>
              <div v-else>
                <el-button class="columnBtn1" type="text" size="small" @click="del(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
// 想要发送请求的时候 想到 axios ---》 我封装过了 把他导入进来直接用
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data() {
    return {
      input: '',
      orderInput:"",
      statusValue:'',
      options:[
        {
          value:'通过',
          label:'通过'
        },
        {
          value:'不通过',
          label:'不通过'
        },
        {
          value:'未审核',
          label:'未审核'
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      pageQuery:{
        pageNum:1,
        pageSize:10
      },
      // 总页数
      total:100
    }
  },
  methods:{
    // 初始序号
    initIndex(){
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },
    // 获取数据的方法
    getList(){
      let params = {
        pageNum:this.pageQuery.pageNum,
        pageSize:this.pageQuery.pageSize,
        status:this.statusValue
      }
      instance.post('/orderComment/list',params).then(res=>{
        console.log(res);
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    // 通过评论
    pass(scope){
      instance.post('/orderComment/pass',scope.id).then(res=>{
        utils.showSuccess(res.data.message)
        this.getList()
      })
    },
    // 不通过评论
    noPass(scope){
      instance.post('/orderComment/nopass',scope.id).then(res=>{
        utils.showSuccess(res.data.message)
        this.getList()
      })
    },
    // 删除评论
    del(scope){
      instance.post('/orderComment/del',scope.id).then(res=>{
        utils.showSuccess(res.data.message)
        this.getList()
      })
    },
    // 查询
    search(){
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  created(){
    // 页面生成的时候 发送请求 获取数据
    this.getList()
  },
  components:{
    Card
  }
}
</script>

<style lang="less" scoped>
.order_box{
  .header{
    display: flex;
    .header_box{
      margin-right: 10px;
      .el-button--mini{
        background-color: #188b8f;
        color: #fff;
      }
    }
  }
}
</style>